<template>
	<screen-page title="仓库信息概览" ref="page">
		<div class="page-newscreen1-container ver-flex-containter">
			<div class="ver-flex-block">
				<div class="hor-flex-containter">
					<div class="divider"></div>
					<div class="flex-block">
						<module1 :counts="data1" />
					</div>
					<div class="divider"></div>
					<div class="special-blcok special-blcok-size-a">
						<module2 />
					</div>
					<div class="divider"></div>
					<div class="flex-block">
						<module3 :counts="data3" />
					</div>
					<div class="divider"></div>
				</div>
			</div>
			<div class="ver-divider"></div>
			<div class="ver-flex-block">
				<div class="hor-flex-containter">
					<div class="divider"></div>
					<div class="flex-block">
						<module4 title="今日出库任务" :days="data4a" />
					</div>
					<div class="divider"></div>
					<div class="flex-block">
						<module4 title="今日入库任务" :days="data4b" />
					</div>
					<div class="divider"></div>
				</div>
			</div>
		</div>
	</screen-page>
</template>

<script setup>
import { ref, inject, onMounted, onBeforeUnmount } from 'vue';
import ScreenPage from '@/components/ScreenPage.vue'
import Module1 from './modules/Module1.vue'
import Module2 from './modules/Module2.vue'
import Module3 from './modules/Module3.vue'
import Module4 from './modules/Module4.vue'
import { $loading } from '@/assets/js/utils'

const $config = inject('$config')
const $api = inject('$api')

let interval1 = null;
let interval2 = null;

const data1 = ref({})
const data3 = ref({})
const data4a = ref({})
const data4b = ref({})

const getData = function(){
	$loading.show()
	getData1((f)=>{
		if (f) {
			getData2(()=>{
				$loading.hide()
			})
		} else {
			$loading.hide()
		}
	})
}

const getData1 = function(callback){
	$api.get('WarehouseIntroduction',{},{block:'newscreen'}).then((d)=>{
		data1.value = {
			count1:d.warehouseArea || 0,
			count2:d.totalStorageLocation || 0,
			count3:d.areaNum || 0
		}
		let n1 = d.typeOfGoods || 0
		let n2 = d.typeOfUse || 0
		let rateNum = '0';
		if (n2!==0) {
			rateNum = Number(((n2/n1)*100).toFixed(2))
		}
		data3.value = {
			count1:rateNum,
			count2:n1
		}
		callback && callback(true)
	}).catch(()=>{
		callback && callback(false)
	})
}

const getData2 = function(callback){
	$api.get('GetInAndOutTask',{},{block:'newscreen'}).then((d)=>{
		data4a.value = {
			number1:d.outPlanNum || 0,
			number2:d.outActualNum || 0
		}
		data4b.value = {
			number1:d.inPlanNum || 0,
			number2:d.inActualNum || 0
		}
		callback && callback(true)
	}).catch(()=>{
		callback && callback(false)
	})
}

const createInterval = function(){
	interval1 = window.setInterval(getData1,$config.base.screen.newscreen1.intervalTime1)
	interval2 = window.setInterval(getData2,$config.base.screen.newscreen1.intervalTime2)
}

const destoryIntervel1 = function(){
	try{
		window.clearInterval(interval1)
		interval1 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel2 = function(){
	try{
		window.clearInterval(interval2)
		interval2 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel = function(){
	destoryIntervel1()
	destoryIntervel2()
}

onMounted(()=>{
	getData()
	createInterval()
})

onBeforeUnmount(()=>{
	destoryIntervel()
})
</script>

<style scoped lang="scss">
.page-newscreen1-container{
	padding-bottom: 0.68%;
	height: 100%;
	box-sizing: border-box;
	.divider{
		width: .14em;
		flex-shrink: 0;
	}
	.ver-divider{
		height: .14em;
		flex-shrink: 0;
	}
	.ver-flex-block{
		height: 1px;
		flex-grow: 1;
	}
	.flex-block{
		width: 1px;
		flex-grow: 1;
	}
	.special-blcok{
		flex-shrink: 0;
	}
	.special-blcok-size-a{
		width: 8.55em;
	}
}
</style>